<template>
  <div class="major">
    <breadcrumb>专业优先填报</breadcrumb>
    <!-- 专业详情 -->
    <sideslip ref="sideslip" @bindevent="getData">
      <major-detail ref="refMajorDetail"></major-detail>
    </sideslip>

    <alternative @event="bindSwitch" :sum="$store.state.majorSum">
      <majorAlternative ref="childAlternative"></majorAlternative>
    </alternative>

    <header>
      <ul class="major-select">
        <li>
          <select-grade @event="bindSelect"></select-grade>
        </li>
        <li>
          <select-type @event="bindSelectType"></select-type>
        </li>
      </ul>
      <nav>
        <tabs :data="categoryList" :value="curIndex" @event="bindTabs"></tabs>
      </nav>
    </header>
    <section v-if="majorData.length > 0">
      <dl :id="'to-'+index" :name="item.id" v-for="(item,index) in majorData" :key="index">
        <dt class="block-title"> {{item.name}} </dt>
        <dd v-for="(sItem,sIndex) in item.majorSubCategories" :key="sIndex">
          <h3>{{sItem.name}}</h3>
          <ul>
            <li v-for="(mItem,mIndex) in sItem.majors" :key="mIndex">
              <span @click="bindMajor(mItem)">{{mItem.name}}</span>
              <!-- <i
                class="icon icon-star" :class="mItem.choose && 'c-blue'"
                @click="add(mItem);">
              </i> -->
            </li>
          </ul>
        </dd>
      </dl>
    </section>
    <no-content v-else :text="text" style="width:100%"></no-content>
  </div>
</template>
<script>
import { api } from '@/utils'
import selectGrade from '~/components/slot/select-grade'
import selectType from '~/components/slot/select-type'
import alternative from '~/components/animation/alternative'
import majorDetail from './major-detail'
import majorAlternative from './major-alternative'
const COMPONENTS = {
  selectGrade,
  selectType,
  alternative,
  majorDetail,
  majorAlternative
}
export default {
  layout: 'zhiyuan-select',
  components: COMPONENTS,
  data () {
    return {
      curIndex: 0,
      gradeId: 0,
      typeId: 1001,
      categoryList: [],
      majorData: [],
      text: '正在加载数据...'
    }
  },
  beforeMount () {
    this.getData()
  },
  methods: {
    bindMajor (data) {
      this.$refs.sideslip.$emit('event')
      this.$refs.refMajorDetail.init(data)
    },
    getCnt () {
      // 获取备选库大学数量
      this.$axios.get(api.getMajorFirstCnt, {params: {_: (new Date()).getTime()}}).then(data => {
        this.$store.commit('setMajorSum', data)
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
      })
    },
    bindSelect (value) {
      this.curIndex = 0
      this.gradeId = value
      this.getData()
    },
    bindSelectType (value) {
      this.curIndex = 0
      this.typeId = value
      this.getData()
    },
    bindTabs (value) {
      this.curIndex = value
      let _id = 'to-' + value
      let _el = document.getElementById(_id)
      window.scrollTo(0, _el.offsetTop + 50)
    },
    bindSwitch (value) {
      // 右侧备选库展开触发备选库加载数据
      if (value) {
        this.$refs.childAlternative.getAlternative()
      } else {
        this.getData()
      }
    },
    getData () {
      let _params = {
        gradeId: this.gradeId,
        topicTypeId: this.typeId
      }
      this.$axios.get(api.queryFirstMajorToWeb, { params: _params }).then(data => {
        if (data.length > 0) {
          this.majorData = data
          this.categoryList = []
          this.lodash.map(data, (item) => {
            this.categoryList.push({
              id: item.id,
              name: item.name
            })
          })
          this.text = '暂无数据'
        } else {
          if (this.typeId === 1002) {
            // console.log('点击适合我的，没有数据，去做霍兰德测评')
            // this.$router.push({
            //   path: './holland-entry'
            // })
          }
          this.majorData = []
          this.categoryList = []
          this.text = '暂无数据'
        }
      })
      this.getCnt()
    },
    add (item) {
      let _majorSum = this.$store.state.majorSum
      let _sum = item.choose ? _majorSum - 1 : _majorSum + 1
      this.$store.commit('setMajorSum', _sum)
      item.choose = !item.choose

      // 延时点击
      // if (this.praiseflag) {
      this.$axios.post(api.setFirstMajor, { major: { id: item.id } }).then(data => {
        // this.list[index].choose = true
        console.log('添加成功或失败', item.id)
      }).catch(data => {
        this.getCnt()
        this.$message.error('网络走丢了，请稍后重试！')
      })
      // }
      // this.praiseflag = false
      // setTimeout(() => {
      //   this.praiseflag = true
      // }, 500)
      // setTimeout(() => {
      // }, 3000)
    }
  }
}
</script>
<style lang="scss" scoped>
  .major{
    nav{
      padding:8px 10px 10px;
    }
    &-select{
      display:flex;
      li{
        width:120px;
        margin-right:15px;
      }
    }
    section{
      padding:0 10px;
      dl{
        padding-top:25px;
        dt{
          // @extend .;
        }
        dd{
          display: flex;
          h3{
            @extend .c-ad,.n;
            font-size:16px;
            width:100px;
            padding:5px 0;
          }
          ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            li{
              padding:5px 0;
              margin-right:50px;
              cursor:pointer;
              span:hover{
                @extend .c-blue;
              }
              i{
                display: inline-block;
                width:25px; text-align:right;
                color:$stable-cb;
              }
            }
          }
        }
      }
    }
  }
</style>
